<!DOCTYPE html>
<html>
<head>
    <title>CORS Test</title>
</head>
<body>
    <h1>CORS Test</h1>
    <button onclick="testCors()">Test CORS</button>
    <div id="result"></div>

    <script>
        async function testCors() {
            const resultDiv = document.getElementById('result');
            resultDiv.innerHTML = 'Testing...';
            
            try {
                // Test 1: Simple CORS test endpoint
                console.log('Testing CORS endpoint...');
                const corsResponse = await fetch('http://localhost:8001/api/v1/cors-test', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                });
                
                if (corsResponse.ok) {
                    const corsData = await corsResponse.json();
                    console.log('CORS test successful:', corsData);
                    resultDiv.innerHTML += '<p>✅ CORS test endpoint: SUCCESS</p>';
                } else {
                    console.error('CORS test failed:', corsResponse.status);
                    resultDiv.innerHTML += '<p>❌ CORS test endpoint: FAILED (' + corsResponse.status + ')</p>';
                }
                
                // Test 2: Hot items endpoint
                console.log('Testing hot-items endpoint...');
                const hotItemsResponse = await fetch('http://localhost:8001/api/v1/hot-items?page=1&page_size=5', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                });
                
                if (hotItemsResponse.ok) {
                    const hotItemsData = await hotItemsResponse.json();
                    console.log('Hot items test successful:', hotItemsData);
                    resultDiv.innerHTML += '<p>✅ Hot items endpoint: SUCCESS</p>';
                    resultDiv.innerHTML += '<pre>' + JSON.stringify(hotItemsData, null, 2) + '</pre>';
                } else {
                    console.error('Hot items test failed:', hotItemsResponse.status);
                    resultDiv.innerHTML += '<p>❌ Hot items endpoint: FAILED (' + hotItemsResponse.status + ')</p>';
                }
                
            } catch (error) {
                console.error('Network error:', error);
                resultDiv.innerHTML += '<p>❌ Network Error: ' + error.message + '</p>';
            }
        }
    </script>
</body>
</html>